<template>
    <div class="addStandard">
         <div style="margin-bottom:50px">
            <van-cell-group style="text-align:left">
                <van-field v-model="test" label="样品采集单编号" label-width='120px'/>
                <van-field v-model="test" label="样品号" />

                <van-cell is-link title="样品检验委托单" :value="form.fdeptname" @click="showFdeptClick"/>
                <van-popup 
                    v-model="showFdept" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择样品检验委托单' 
                        :columns="columnsCompany"
                        show-toolbar
                        value-key='fname'
                        @cancel="onCancel4fdeptname"
                        @confirm="onConfirm4fdeptname"
                     />
                </van-popup>
                <van-field v-model="test" label="委托单位名称" readonly />
                <van-field v-model="test" label="检验类别" readonly />
                <van-field v-model="test" label="样品名称"  />
                <van-field v-model="test" label="样品数量"  type="digit"/>
                <van-field v-model="test" label="生产单位"/>
                <van-cell is-link title="生产日期" :value="test" @click="showTimeClick"/>
                <van-popup v-model="showTime" get-container="body" position='bottom'>
                    <van-datetime-picker
                        v-model="currentDate"
                        type="date"
                        :formatter="formatter"
                        @confirm='timeConfirm'
                        @cancel='timecancel'
                    />
                </van-popup>
                <van-field v-model="test" label="包装规格"/>
                <van-field v-model="test" label="计量单位"/>
                <van-field v-model="test" label="注册商标"/>
                <van-field v-model="test" label="样品批号"/>
                <van-cell is-link title="采样时间" :value="test" @click="showImplementClick"/>
                <van-popup v-model="showImplement" get-container="body" position='bottom'>
                    <van-datetime-picker
                        v-model="currentDate"
                        type="date"
                        :formatter="formatter"
                        @confirm='ImplementConfirm'
                        @cancel='Implementcancel'
                    />
                </van-popup>
                <van-field v-model="test" label="采样人"/>
                <van-field v-model="test" label="采样地点"/>
                <van-field v-model="test" label="采样基数"  type="number"/>
                <van-cell is-link title="样品等级" :value="test" @click="showFunctionClick"/>
                <van-popup v-model="showFunction" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择样品等级' 
                        :columns="columnsLevel"
                        show-toolbar
                        @cancel="onCancel4F"
                        @confirm="onConfirm4F"
                    />
                </van-popup>
                 <van-cell  title="上传图片" />
                <van-uploader
                    style="margin-left:10px;margin-top:10px"
                    v-model="fileList"
                    multiple
                    :max-count="2"
                    />
            </van-cell-group>
         </div>
         <div class='addStandardBtn'>保存</div>
    </div>
</template>

<script>
import {
    searchforwx
} from '@/api/addContract'
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,Field
    ,DatetimePicker
    ,Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Switch
    ,RadioGroup
    , Radio 
    ,Checkbox
    , CheckboxGroup
    ,Uploader } from 'vant';
export default {
    name: 'addStandard',
    components: {
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
        [Switch.name]:Switch,
        [RadioGroup.name]:RadioGroup,
        [Radio.name]:Radio,
        [Checkbox.name]:Checkbox,
        [CheckboxGroup.name]:CheckboxGroup,
        [Uploader.name]:Uploader
    },
    data () {
        return {
            fileList:[],
            form:{
                fdeptname:'',
                fdeptid_cus:''
            },
            test:'',
            checked:true,
            showTime:false,
            currentDate: new Date(),
            showImplement:false,
            showWork:false,
            showFdept:false,
            showFunction:false,
            columns: [
                { text: '类别一',id:1},
                { text: '商品二' },
                { text: '商品三' }
            ],
            columnsLevel:[
                { text: '一级',id:1},
                { text: '二级',id:2 },
                { text: '三级',id:3 },
                { text: '合格',id:4 },
                { text: '不合格',id:5 }
            ],
            showLevel:false,
            showClass:false,
            radio:'1',
            result:[],
            list:[
                'a','b'
            ],
            columnsCompany:[]
        }
    },
    created(){
        this.searchColumns()
    },
    methods:{
        searchColumns(){
            searchforwx().then(res=>{
                if(res.isSuccess){
                    this.columnsCompany = res.rows.filter(function(value) {return value.fstate ==1;})
                }
            })
        },
        toggle(index) {
            this.$refs.checkboxes[index].toggle();
        },
        toStandardInfo(){
            this.$router.push({path:"/standardInfo"});
        },
        showTimeClick(){
            this.showTime = true
        },
        formatter(type, val) {
            console.log(type)
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
        timeConfirm(val){
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },
        showImplementClick(){
            this.showImplement = true
        },
        ImplementConfirm(){
            this.showImplement = false
        },
        Implementcancel(){
            this.showImplement = false
        },
        showWorkClick(){
            this.showWork = true
        },
        workConfirm(){
            this.showWork = false
        },
        workCancel(){
            this.showWork = false
        },
        showFunctionClick(){
            this.showFunction = true
        },
        onCancel4F(){
            this.showFunction = false
        },
        onConfirm4F(){
            this.showFunction = false
        },
        showLevelClick(){
            this.showLevel = true
        },
        onCancel4L(){
            this.showLevel = false
        },
        onConfirm4L(){
            this.showLevel = false
        },
        showClassClick(){
            this.showClass = true
        },
        onCancel4C(){
            this.showClass = false
        },
        onConfirm4C(){
            this.showClass = false
        },
        showFdeptClick(){
            this.showFdept = true
        },
        onCancel4fdeptname(val){
            this.showFdept = false
        },
        onConfirm4fdeptname(val){
            console.log(val)
            this.form.fdeptname = val.fname
            this.form.fdeptid_cus = val.fid
            this.showFdept = false
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.formTitle{
    line-height: 34px;
    margin-left:16px;
    color: #999
}
.addStandardBtn{
    line-height: 40px;
    width:100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left:0;
    background-color: #1989fa;
    color:white;  
}
</style>
